<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="true"/>

  <title>iinkJS: Examples</title>

  <link rel="stylesheet" href="examples.css">

  <style>
    .title {
      color: initial !important;
    }
    h2 {
      border-bottom: 1px solid #eaecef;
      margin-top: 24px;
      margin-bottom: 16px;
    }
  </style>

</head>

<body>
<svg>
  <symbol id="icn-info" viewBox="0 0 16 16">
    <g stroke="currentColor" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 7.5l1.526-.366c.538-.13.823.198.646.704L6.93 11.386c-.293.836.181 1.42 1.058 1.302L9.4 12.5"
            stroke-width="1.8" vector-effect="non-scaling-stroke" class="path">
      </path>
      <path d="M8.9 3.25l-.02.1" stroke-width="2.6" vector-effect="non-scaling-stroke" class="path">
      </path>
    </g>
  </symbol>
  <symbol id="icn-github" viewBox="0 0 16 16">
    <path
      d="M8 1a7 7 0 0 0-2.213 13.642c.35.064.478-.152.478-.337 0-.166-.006-.607-.01-1.19-1.947.422-2.357-.94-2.357-.94-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.426.048-.426.703.05 1.073.722 1.073.722.624 1.07 1.638.76 2.037.581.063-.452.244-.76.444-.935-1.554-.177-3.188-.778-3.188-3.46 0-.764.273-1.39.72-1.878-.072-.177-.312-.89.07-1.853 0 0 .586-.188 1.924.718A6.705 6.705 0 0 1 8 4.385c.595.003 1.194.08 1.753.236 1.336-.906 1.923-.718 1.923-.718.382.964.141 1.676.07 1.853a2.7 2.7 0 0 1 .72 1.878c0 2.69-1.638 3.281-3.197 3.454.251.216.475.644.475 1.297 0 .935-.009 1.69-.009 1.92 0 .187.127.405.482.337A7 7 0 0 0 8 1"
      fill="currentColor" fill-rule="evenodd"></path>
  </symbol>
  <symbol id="icn-play" viewBox="0 0 16 16">
    <path
      d="M13.153 8.589c.606-.325.603-.854 0-1.178L4.873 2.97C4.392 2.709 4 2.945 4 3.496v9.008c0 .55.39.787.874.527l8.28-4.442z"
      fill="currentColor" fill-rule="evenodd"></path>
  </symbol>
</svg>
<div>
  <section class="example-section">
    <h1>iinkJS examples</h1>
    <h2>Table of contents</h2>
    <ul>
      <li><a href="#v4-ws">iink SDK Web with WebSockets</a></li>
      <li><a href="#v4-rest">iink SDK Web with REST</a></li>
      <li><a href="#experimental">Experimental</a></li>
      <li><a href="#development">Development</a></li>
    </ul>
    <h2><a class="title" name="v4-ws">iink SDK web with WebSockets</a></h2>
    <div class="grid-wrapper">
      <div class="grid-column-one">
        <p><strong>TEXT with iink SDK web (with Smart Guide)</strong></p>
        <div class="center">
          <a href="v4/websocket_text_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>MATH with iink SDK web</strong></p>
        <div class="center">
          <a href="v4/websocket_math_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_math_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Disable guides</strong></p>
        <div class="center">
          <a href="v4/websocket_text_iink_no_guides.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_iink_no_guides.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Custom pre-loaded resource text</strong></p>
        <div class="center">
          <a href="v4/custom_resources_text.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/custom_resources_text.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Custom lexicon text</strong></p>
        <div class="center">
          <a href="v4/custom_lexicon_text.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/custom_lexicon_text.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Import content text</strong></p>
        <div class="center">
          <a href="v4/import_content.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/import_content.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Import content math with JIIX</strong></p>
        <div class="center">
          <a href="v4/import_math_jiix.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/import_math_jiix.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Pointer events</strong></p>
        <div class="center">
          <a href="v4/pointer_events.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/pointer_events.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Handle errors</strong></p>
        <div class="center">
          <a href="non-version-specific/handle_errors.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/non-version-specific/handle_errors.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Configure on-demand export</strong></p>
        <div class="center">
          <a href="non-version-specific/on_demand_exports.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/non-version-specific/on_demand_exports.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Math inside page</strong></p>
        <div class="center">
          <a href="v4/math-inside-page.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/math-inside-page.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
      </div>
      <div class="grid-column-two">
        <p><strong>Searching text (without Smart Guide)</strong></p>
        <div class="center">
          <a href="v4/websocket_text_iink_search.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_iink_search.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Interact with iink SDK web</strong></p>
        <div class="center">
          <a href="v4/interact.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/interact.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Customize the style and change the font</strong></p>
        <div class="center">
          <a href="v4/customize_style.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/customize_style.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Custom resource math</strong></p>
        <div class="center">
          <a href="v4/custom_resources_content_math.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/custom_resources_content_math.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Custom resource math (pre-compiled)</strong></p>
        <div class="center">
          <a href="v4/custom_resources_math.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/custom_resources_math.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Use multiple inputs fields</strong></p>
        <div class="center">
          <a href="v4/multiple_inputs.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/multiple_inputs.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Use local storage to save text</strong></p>
        <div class="center">
          <a href="v4/local_storage_text.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/local_storage_text.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Change the language</strong></p>
        <div class="center">
          <a href="non-version-specific/change_language.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/non-version-specific/change_language.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Highlight words</strong></p>
        <div class="center">
          <a href="v4/highlight_words.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example
          </a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/highlight_words.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>Produce file from writing (docx, html...)</strong></p>
        <div class="center">
          <a href="v4/file_export.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/file_export.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
      </div>
    </div>
    <h2><a class="title" name="v4-rest">iink SDK web with REST</a></h2>
    <div class="grid-wrapper">
      <div class="grid-column-one">
        <p><strong>TEXT with iink SDK web</strong></p>
        <div class="center">
          <a href="v4/rest/rest_text_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/rest/rest_text_iink.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>DIAGRAM with iink SDK web</strong></p>
        <div class="center">
          <a href="v4/rest/rest_diagram_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/rest/rest_diagram_iink.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>iinkJS usage without the UI </strong></p>
        <div class="center">
          <a href="v4/rest/no_ui.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/rest/no_ui.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
      </div>
      <div class="grid-column-two">
        <p><strong>MATH with iink SDK web</strong></p>
        <div class="center">
          <a href="v4/rest/rest_math_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/rest/rest_math_iink.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
        <p><strong>RAW CONTENT with iink SDK web</strong></p>
        <div class="center">
          <a href="v4/rest/rest_raw_content_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a href="https://github.com/MyScript/iinkJS/blob/master/examples/v4/rest/rest_raw_content_iink.html"
             class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
      </div>
    </div>
    <h2><a class="title" name="development">Development</a></h2>
    <div class="grid-wrapper">
      <div class="grid-column-one">
        <p><strong>Configuring debug traces</strong></p>
        <div class="center">
          <a href="dev/debug.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example</a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/dev/debug.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
      </div>
    </div>
    <h2><a class="title" name="experimental">Experimental</a></h2>
    <div class="notice notice-warning">
      <svg class="icn icn-warning">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-info"></use>
      </svg>
      <div class="notice-txt">
        Demonstration of existing technology still limited. May not work. Contact us if you are willing to use it.
      </div>
    </div>
    <div class="grid-wrapper">
      <div class="grid-column-one">
        <p><strong>GRAPHICS with iink SDK web</strong></p>
        <div class="center">
          <a href="experimental/websocket_diagram_iink.html" class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
            </svg>
            View example
          </a>
          <a
            href="https://github.com/MyScript/iinkJS/blob/master/examples/experimental/websocket_diagram_iink.html"
            class="btn">
            <svg class="icn">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
            </svg>
            Get source code</a>
        </div>
      </div>
      <div class="grid-column-two">
      </div>
    </div>
  </section>
</div>
</body>
</html>